<template>
	<view>
		<block v-if="isload">
			<form @submit="formsubmit">
				<view class="form-box">
					<view class="form-item">
						<view class="f1">邀请商家<text style="color:red"> *</text></view>
						<view class="f2">
							<input type="text" placeholder="请选择邀请商家"  v-model="inputValue" name='inputValue'/>
						</view>
						<view class="f2">
							<button @click="lo">查询</button>
						</view>
					</view>
					<block v-if="showPicker">
						<view class="form-box2">
							<view class="form-item1"  v-for="(item,index) in info" :key="index">
								<view class="f1" @click="clickId(item)">{{item.name}}</view>
							</view>
						</view>
					</block>
				</view>
				
				<view class="st_button flex-y-center">
					<button form-type="submit" :style="{background:t('color1')}">邀请</button>
				</view>
			</form>
			
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	import PostRelatedProduct from './components/PostRelatedProduct.vue'
	var app = getApp();

	export default {
		components: {
			PostRelatedProduct
		},

		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,

				pre_url: app.globalData.pre_url,
				datalist: [],
				content_pic: [],
				pagenum: 1,
				cateArr: [],
				cindex: -1,
				pics: [],
				video: '',
				sysset: {},
				productIds: [],
				products: [],
				showPicker:false,
				info: [],
				clistId:'',
				inputValue:''
			};
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getdata();
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		methods: {
			onProductChange(ids) {
				this.productIds = ids
			},
			lo(){
				console.log(this.inputValue,'this.inputValue')
				this.getdata()
				setTimeout(()=>{
					this.showPicker =true
				},300)
			},
			clickId(e){
				this.clistId = e
				this.showPicker =false
				this.inputValue = this.clistId.name
				console.log(this.clistId,'===>this.clistId')
			},
			getdata: function() {
				var that = this;
				that.loading = true;
				app.post(
					// 'ApiAdminShortvideo/uploadvideo',
					'ApiAllianceCard/getUninvitedMerchantsById', {
						id: this.opt.id || '',
						name:that.inputValue || '',
					},
					function(res) {
						console.log(res, '===>res')
						that.loading = false;
						if (res.status == -4) {
							app.alert(res.msg);
							return;
						}
						that.info = res.data
						console.log(that.info,'===>that.info')
						that.clist = res.data;
						var clist = res.data;
						if (clist.length > 0) {
							var cateArr = [];
							for (var i in clist) {
								if (that.opt && that.opt.cid == clist[i].id) {
									that.cindex = i;
								}
								cateArr.push(clist[i].name);
							}
						} else {
							cateArr = false;
						}
						that.cateArr = cateArr

						that.loaded();
					});
			},
			cateChange: function(e) {
				this.cindex = e.detail.value;
			},
			formsubmit: function(e) {
				var that = this;
				console.log(e);
				var clist = that.clistId;

				console.log(clist, '==>formdata')
					app.post(
						// 'ApiAdminIndex/uploadvideo',
						'ApiAllianceCard/invitingMerchants', {
							id:this.opt.id,
							v_bid:clist.id
						},
						function(res) {
							app.showLoading(false);
							if (res.status == 1) {
								app.success(res.msg);
								setTimeout(function() {
									app.goback(true);
								}, 1000);
							} else {
								app.error(res.msg);
							}
						});

			},
			uploadimg: function(e) {
				var that = this;
				var field = e.currentTarget.dataset.field
				var pics = that[field]
				if (!pics) pics = [];
				app.chooseImage(function(urls) {
					for (var i = 0; i < urls.length; i++) {
						pics.push(urls[i]);
					}
					if (field == 'pic') that.pic = pics;
					if (field == 'pics') that.pics = pics;
					if (field == 'zhengming') that.zhengming = pics;
				}, 1)
			},
			removeimg: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index
				var field = e.currentTarget.dataset.field
				var pics = that[field]
				pics.splice(index, 1)
			},
		}
	};
</script>
<style>
	page {
		background: #f7f7f7
	}

	.st_box {
		padding: 0rpx 0
	}

	.st_button {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 24rpx 10rpx 24rpx;
	}

	.st_button button {
		background: #1658c6;
		border-radius: 6rpx;
		border: none;
		padding: 0 20rpx;
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		width: 100%;
		display: flex;
		height: 100rpx;
		justify-content: center;
		align-items: center;
	}

	.form-box {
		padding: 2rpx 24rpx 0 24rpx;
		background: #fff;
		margin: 24rpx;
		border-radius: 10rpx
	}
	.form-box2{
		max-height: 200px;
		overflow-y: auto;
	}
	
	.form-item1 {
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		
	}
	
	.form-item1 .f1 {
		color: #222;
		width: 200rpx;
		flex-shrink: 0
	}

	.form-item {
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee
	}

	.form-item .f1 {
		color: #222;
		width: 200rpx;
		flex-shrink: 0
	}

	.form-item .f2 {
		display: flex;
		align-items: center
	}

	.st_form {
		padding: 24rpx;
		background: #ffffff;
		margin: 10px;
		border-radius: 15px;
	}

	.st_form input {
		width: 100%;
		height: 120rpx;
		border: none;
		border-bottom: 1px solid #EEEEEE;
	}

	.st_form input::-webkit-input-placeholder {
		/* WebKit browsers */
		color: #BBBBBB;
		font-size: 24rpx
	}

	.st_form textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx 0;
		border: none;
		border-bottom: 1px solid #EEEEEE;
	}

	.layui-imgbox {
		margin-right: 16rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		position: relative;
	}

	.layui-imgbox-img {
		display: block;
		width: 200rpx;
		height: 200rpx;
		padding: 2px;
		border: #d3d3d3 1px solid;
		background-color: #f6f6f6;
		overflow: hidden
	}

	.layui-imgbox-img>image {
		max-width: 100%;
	}

	.layui-imgbox-repeat {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		line-height: 28rpx;
		right: 2px;
		bottom: 2px;
		color: #999;
		font-size: 30rpx;
		background: #fff
	}

	.uploadbtn {
		position: relative;
		height: 200rpx;
		width: 200rpx
	}

	.uploadbtn_ziti1 {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.uploadbtn_ziti2 {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		padding-top: 20rpx;
		margin-top: 20rpx;
		border-top: 1px solid #EEEEEE;
	}
</style>